<template>
	<view class="rider-order">
		<NavBar title="已完成"/>
		<view class="content" v-if="orderList.length">
			<OrderItem 
				page="complete"
				:index="index"
				:orderInfo="item" 
				v-for="(item, index) in orderList" 
				:key="item"
			/>
		</view>
		<Empty txt="暂时还没有已完成的订单~" v-else/>
		<TabBar tabType="rider" :currentPage="2" />
	</view>
</template>

<script setup>
	import { ref } from 'vue';
	import { onLoad, onReachBottom } from '@dcloudio/uni-app'
	import TabBar from '@/components/TabBar.vue';
	import Empty from '@/components/Empty.vue';
	import NavBar from '../components/RiderNavBar.vue';
	import OrderItem from '../components/OrderItem.vue';
	import { useAddressStore } from '@/store/index.js'
	import { GetCompleteListApi, EvaUserApi } from '@/service/rider.js'
	const page = ref(1)
	const pageSize = ref(15)
	const total = ref()
	const orderList = ref([])
	const getCompleteList = () => {
		const { lonlat } = useAddressStore()
		const params = {
			status: 2,
			latitude: lonlat.latitude,
			longitude: lonlat.longitude
		} 
		GetCompleteListApi(params).then(res => {
			total.value = res.total
			orderList.value.push(...res.data)
		})
	}
	onLoad(() => {
		getCompleteList()
	})
	onReachBottom(() => {
		if(page.value*pageSize.value>=total.value) return
		page.value = page.value + 1
		getCompleteList()
	})
</script>

<style lang="scss" scoped>
.rider-order {
	.content {
		padding: 10px 12px;
		padding-bottom: calc(constant(safe-area-inset-bottom) + 68px);
		padding-bottom: calc(env(safe-area-inset-bottom) + 68px);
		box-sizing: border-box;
	}
}
</style>
